<template>
    <h2>会员列表</h2>
    <span>手机号</span>
    <input type="text" v-model="state.phone">
    <input type="button" value="查询" @click="memberinfo">
    <table border="1">
        <thead>
            <tr>
    <td>姓名</td>
    <td>手机号</td>
    <td>头像</td>
    <td>地址</td>
    <td>操作</td>
</tr>
        </thead>
        <tbody>
    <tr v-for="item in list">
    <td>{{item.m_Name}}</td>
    <td>{{item. m_Phone}}</td>
    <td><img :src="item.m_Img" width="50" height="50"></td>
    <td>{{ item.m_Address}}</td>
    <td><input type="button" value="删除" @click="del(item.m_Id)">
        <input type="button" value="注销" @click="writingoff(item.m_Id,item.m_State)">
        <input type="button" value="修改">
        <input type="button" value="送优惠券" @click="send(item.id)">
    </td>
</tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
import {onMounted,reactive,toRefs} from 'vue';
import axios from 'axios';
import router from '../../router';
//1、：点是把控件变成对象
//2、list数组，用list点出数据
const data:any=reactive({
    state:{
        phone:''
    },
    list:[]
})
const {state,list}=toRefs(data);
onMounted(()=>{
    memberinfo();
})

const memberinfo=()=>{
    axios({
        url:'/api/MemberLogin/GetMemberInfos',
        method:'get',
        params:state.value
    })
    .then(res=>{
        console.log(res);
        list.value=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
//删除
const del=(id:any)=>{
    var f=confirm('确认要删除吗？');
    if(f==true){
    axios({
        url:'/api/MemberLogin/DelId',
        method:'delete',
        params:{id:id}
    })
    .then(res=>{
        console.log(res);
        if(res.data.data==1)
        {
            alert('删除成功');
            memberinfo();
        }
        else{
            alert('删除失败');
            return;
        }
        
    })
    .catch(err=>{
        console.log(err);
    })
 }
}

//启用禁用
//=1=0与之对应
const writingoff=(id:any,state:any)=>{
    if(state=1)
    {
        state=0;
    }
    else
    {
        state=1;
    }
    axios({
        url:'/api/MemberLogin/WirtingOff',
        method:'get',
        params:{id:id,state:state}
    })
    .then(res=>{
        console.log(res);
        if(res.data.data==1)
        {
            alert('修改状态成功');
            memberinfo();
        }
        else{
            alert('修改状态失败');
            return;
        }

    })
    .catch(err=>{
        console.log(err);
    })
}

const send=(id:any)=>{
    router.push({
        path:'/components/IsTrueView.vue',
        query:{
            id:id
        }
    })
}
</script>

<style scoped>

</style>